Ajax এবং JSONP দুটি জনপ্রিয় ওয়েব প্রযুক্তি, যেগুলি ক্লায়েন্ট-সাইডে সার্ভার থেকে ডেটা রিট্রাইভ করার জন্য ব্যবহৃত হয়। যেখানে Ajax শুধুমাত্র একক ডোমেইন থেকে ডেটা সংগ্রহ করতে পারে, সেখানে JSONP (JSON with Padding) ব্যবহৃত হয় Cross-Domain রিকোয়েস্ট সম্পাদনের জন্য। JSONP ক্লায়েন্ট-সাইডের জন্য একটি ট্রিক, যা পেজ রিফ্রেশ না করেই বিভিন্ন ডোমেইন থেকে ডেটা ফেচ করতে সক্ষম।
JSONP হলো একটি কৌশল যা Ajax রিকোয়েস্টের সীমাবদ্ধতা কাটিয়ে ডেটা এক ডোমেইন থেকে অন্য ডোমেইনে পাঠানোর কাজ করে। এটি আসলে একটি স্ক্রিপ্ট ট্যাগ ইনজেকশন পদ্ধতি। JSONP শুধুমাত্র GET রিকোয়েস্টের মাধ্যমে কাজ করে, এবং এতে সার্ভার সাইড থেকে একটি প্যাডেড JSON ডেটা রিটার্ন করা হয়, যা ক্লায়েন্ট-সাইডে কলব্যাক ফাংশন হিসেবে ব্যবহৃত হয়।
যখন আপনি এক ডোমেইন থেকে অন্য ডোমেইনে Ajax রিকোয়েস্ট পাঠানোর চেষ্টা করেন, তখন ব্রাউজারের Same-Origin Policy ব্লক করে দেয়। এই নীতিটি ওয়েব ব্রাউজারগুলিতে নিরাপত্তার জন্য প্রয়োগ করা হয়, যার ফলে এক ডোমেইন থেকে অন্য ডোমেইনে রিকোয়েস্ট পাঠানো যায় না।
এখানে JSONP একটি সমাধান হিসেবে কাজ করে, কারণ এটি একটি <script> ট্যাগ ব্যবহার করে, যা Same-Origin Policy এর আওতায় পড়ে না।
JSONP এ সার্ভার একটি JavaScript ফাংশন কলের মাধ্যমে JSON ডেটা পাঠায়। ক্লায়েন্ট-সাইডে, আপনি একটি callback function নির্দিষ্ট করেন, যা সার্ভারের ডেটা প্রাপ্তি হলে কাজ করবে।
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<button onclick="loadData()">Load Data from External Domain</button>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript (JSONP Call):
function loadData() {
var script = document.createElement("script");
script.src = "https://api.example.com/getData?callback=handleResponse";
document.body.appendChild(script);
}
function handleResponse(data) {
var output = document.getElementById("output");
output.innerHTML = "<strong>Received Data:</strong><br>" + JSON.stringify(data);
}
যখন সার্ভার থেকে রেসপন্স আসবে, এটি একটি callback ফাংশনের মাধ্যমে ডেটা প্রদান করবে। সার্ভারের JSONP রেসপন্স দেখতে এমন হতে পারে:
handleResponse({
name: "John Doe",
email: "john.doe@example.com"
});
এখানে, handleResponse হচ্ছে ক্লায়েন্ট-সাইডে লেখা একটি কলব্যাক ফাংশন, যা সার্ভার থেকে ডেটা পেলে তাকে প্রসেস করে।
<script> ট্যাগ ব্যবহার করে, যা Same-Origin Policy এর আওতায় পড়ে না।callback ফাংশনে যাবে, তা পরিষ্কারভাবে চিহ্নিত না করলে সমস্যা হতে পারে।JSONP ব্যবহারের কিছু নিরাপত্তা সমস্যা থাকলেও, আধুনিক ওয়েব অ্যাপ্লিকেশনগুলিতে CORS (Cross-Origin Resource Sharing) সমর্থিত। CORS একটি নিরাপদ পদ্ধতি যা HTTP Headers ব্যবহার করে বিভিন্ন ডোমেইন থেকে রিকোয়েস্ট এবং রেসপন্সের অনুমতি দেয়।
header("Access-Control-Allow-Origin: *");
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/getData", true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
CORS সাধারণত নিরাপদ এবং আধুনিক ওয়েব অ্যাপ্লিকেশনে JSONP এর পরিবর্তে ব্যবহার করা হয়।
JSONP হলো একটি কার্যকরী কৌশল, যা Cross-Domain Request সমাধান করতে ব্যবহৃত হয়, বিশেষত যখন CORS সমর্থন না থাকে। তবে JSONP ব্যবহার করার সময় নিরাপত্তা এবং ব্রাউজারের সীমাবদ্ধতার বিষয়গুলো মনে রাখতে হবে। আধুনিক অ্যাপ্লিকেশনে CORS নিরাপদ এবং সর্বোত্তম পদ্ধতি হিসাবে ব্যবহার করা হয়, তবে JSONP এখনও কিছু পুরনো ডোমেইন বা API সিস্টেমে প্রয়োজনীয় হতে পারে।
JSONP (JavaScript Object Notation with Padding) হল একটি ডাটা ফরম্যাট যা Ajax এর মাধ্যমে ক্রস-ডোমেইন রিকোয়েস্ট করতে ব্যবহৃত হয়। Ajax রিকোয়েস্ট সাধারণত একই ডোমেইনে সীমাবদ্ধ থাকে (Same-Origin Policy)। JSONP এই সীমাবদ্ধতা অতিক্রম করার একটি পদ্ধতি, যা সাইটগুলোকে এক ডোমেইন থেকে অন্য ডোমেইনে ডেটা রিকোয়েস্ট করতে সক্ষম করে।
JSONP একটি GET রিকোয়েস্ট ব্যবহার করে কাজ করে। এটি সরাসরি একটি <script> ট্যাগ যুক্ত করে জাভাস্ক্রিপ্ট কোড হিসেবে সার্ভার থেকে ডেটা লোড করে। JSONP রেসপন্স সার্ভার থেকে একটি ফাংশন কল হিসেবে আসে যা ক্লায়েন্ট সাইডে ডেটা প্রসেস করে। এটি কাজ করে নিম্নলিখিত ধাপে:
<script> ট্যাগ ব্যবহার করে JSONP রিকোয়েস্ট করা হয় এবং সেই সাথে সেই callback function এর নাম পাঠানো হয়।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- ডেটা এখানে দেখানো হবে -->
</div>
<script>
// Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
function handleResponse(data) {
var container = document.getElementById('data-container');
container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
}
// JSONP রিকোয়েস্ট পাঠানোর ফাংশন
function fetchData() {
var script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);
}
</script>
</body>
</html>
ব্যাখ্যা:
handleResponse ফাংশনটি সার্ভার থেকে প্রাপ্ত JSONP ডেটা প্রসেস করে।fetchData() ফাংশন একটি <script> ট্যাগ তৈরি করে এবং সেটি ডকুমেন্টে যোগ করে। এর মাধ্যমে ব্রাউজার সার্ভার থেকে জাভাস্ক্রিপ্ট রেসপন্স লোড করে।handleResponse ফাংশন কল করে এবং ডেটা প্রসেস করে।handleResponse({"name": "John", "age": 30});
<script> ট্যাগ ব্যবহার করে এবং একটি callback ফাংশন কল করে।<script> ট্যাগের মাধ্যমে সরাসরি জাভাস্ক্রিপ্ট লোড করে। যদি সার্ভার হ্যাক হয়ে যায় বা ম্যালিশিয়াস কোড পাঠায়, তাহলে সেটি ক্লায়েন্ট সাইডে এক্সিকিউট হবে।<script> ট্যাগ ব্যবহার করে JSON ডেটা একটি callback function এর মাধ্যমে প্রসেস করা হয়।JSONP এখনও অনেক ক্ষেত্রে ব্যবহার করা হয়, তবে নিরাপত্তা এবং ফ্লেক্সিবিলিটির জন্য CORS (Cross-Origin Resource Sharing) বর্তমানে JSONP এর একটি আধুনিক বিকল্প হিসেবে বেশি ব্যবহৃত হয়। CORS Ajax রিকোয়েস্টের জন্য আরও বেশি নিরাপত্তা এবং নিয়ন্ত্রণ প্রদান করে।
Cross-Domain Request হল ক্লায়েন্ট (ব্রাউজার) থেকে এমন একটি HTTP রিকোয়েস্ট যা একটি ভিন্ন ডোমেইনে পাঠানো হয়। উদাহরণস্বরূপ, যদি আপনার ওয়েব অ্যাপ্লিকেশন https://example.com থেকে https://api.anotherdomain.com এ রিকোয়েস্ট পাঠায়, তাহলে এটি একটি Cross-Domain Request।
Same-Origin Policy এর কারণে ব্রাউজার স্বয়ংক্রিয়ভাবে Cross-Domain রিকোয়েস্ট ব্লক করে। এটি ব্রাউজারের একটি সিকিউরিটি ফিচার যা ব্যবহারকারীদের তথ্য রক্ষা করে এবং সাইটগুলোকে একে অপরের ডেটাতে অবৈধভাবে অ্যাক্সেস করা থেকে বাধা দেয়।
JSONP (JavaScript Object Notation with Padding) একটি পুরোনো কিন্তু কার্যকরী পদ্ধতি যা Cross-Domain রিকোয়েস্টের সমস্যা সমাধান করে। এটি Same-Origin Policy কে বাইপাস করতে একটি সৃজনশীল উপায় ব্যবহার করে।
<script> ট্যাগ ব্যবহার করে যেকোনো ডোমেইন থেকে জাভাস্ক্রিপ্ট লোড করা সম্ভব। এটি Same-Origin Policy এর আওতায় পড়ে না।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- ডেটা এখানে দেখানো হবে -->
</div>
<script>
// Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
function handleResponse(data) {
var container = document.getElementById('data-container');
container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
}
// JSONP রিকোয়েস্ট পাঠানোর ফাংশন
function fetchData() {
var script = document.createElement('script');
script.src = 'https://api.externaldomain.com/getData?callback=handleResponse';
document.body.appendChild(script);
}
</script>
</body>
</html>
handleResponse({
"name": "John Doe",
"age": 30
});
ব্যাখ্যা:
handleResponse নামের একটি ফাংশন তৈরি করা হয়েছে, যা সার্ভার থেকে প্রাপ্ত ডেটা প্রসেস করে।fetchData() ফাংশন একটি <script> ট্যাগ তৈরি করে এবং সেটি ব্রাউজারে যোগ করে, যাতে ব্রাউজার সার্ভার থেকে জাভাস্ক্রিপ্ট কোড লোড করে।বর্তমানে JSONP এর বদলে CORS বেশি ব্যবহৃত হয়, কারণ এটি নিরাপত্তা এবং সিকিউরিটি মেনে Cross-Domain রিকোয়েস্ট করতে সক্ষম। CORS এর মাধ্যমে সার্ভার হেডারে উপযুক্ত কনফিগারেশন করে Cross-Domain রিকোয়েস্ট অনুমতি দেওয়া হয়। এটি JSONP এর ঝুঁকিগুলো এড়িয়ে Ajax এর মাধ্যমে Cross-Domain রিকোয়েস্টের অনুমতি দেয়।
JSONP ব্যবহার করে Ajax Request তৈরি করা একটি কার্যকর পদ্ধতি, যা Cross-Domain Request এর সমস্যা সমাধান করে। JSONP মূলত একটি GET রিকোয়েস্ট ব্যবহার করে ডেটা রিকোয়েস্ট করে এবং তা callback function এর মাধ্যমে প্রসেস করে। JSONP এর মাধ্যমে Ajax রিকোয়েস্ট তৈরি করতে হলে একটি <script> ট্যাগ তৈরি করতে হয় এবং সেটি ডকুমেন্টে অ্যাড করা হয়। এরপর সার্ভার JSON ডেটা রেসপন্স হিসেবে ফেরত পাঠায়, যা জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে প্রসেস হয়।
নিচে একটি উদাহরণ দেওয়া হলো যেখানে JSONP ব্যবহার করে একটি Ajax রিকোয়েস্ট তৈরি করা হয়েছে এবং সেই ডেটা প্রসেস করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Ajax Request Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- JSONP ডেটা এখানে দেখানো হবে -->
</div>
<script>
// Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
function handleResponse(data) {
var container = document.getElementById('data-container');
container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
}
// JSONP রিকোয়েস্ট পাঠানোর ফাংশন
function fetchData() {
// <script> ট্যাগ তৈরি করা
var script = document.createElement('script');
// JSONP রিকোয়েস্ট URL সেট করা
// এখানে callback=handleResponse ব্যবহার করা হয়েছে
script.src = 'https://example.com/api?callback=handleResponse';
// ডকুমেন্টে <script> ট্যাগ অ্যাড করা
document.body.appendChild(script);
}
</script>
</body>
</html>
১. Callback Function:
handleResponse ফাংশনটি সার্ভার থেকে JSONP রেসপন্স পাওয়ার পরে এক্সিকিউট হয়।২. Script Tag Creation:
fetchData() ফাংশনটি একটি <script> ট্যাগ তৈরি করে এবং সেটি ডকুমেন্টে অ্যাড করে।script.src এ JSONP রিকোয়েস্টের URL সেট করা হয়েছে, যেখানে callback প্যারামিটার হিসেবে handleResponse পাস করা হয়েছে।৩. Server Response:
handleResponse({
"name": "John Doe",
"age": 30
});
handleResponse ফাংশনকে কল করে এবং ডেটা প্রসেস করে।সার্ভার সাইডে JSONP রেসপন্স তৈরি করতে, সার্ভারকে callback প্যারামিটার অনুযায়ী রেসপন্স দিতে হবে। উদাহরণস্বরূপ, যদি callback হিসেবে handleResponse পাঠানো হয়, তাহলে সার্ভার থেকে রেসপন্সটি হতে পারে:
<?php
// প্যারামিটার সংগ্রহ করা
$callback = $_GET['callback'];
// JSON ডেটা তৈরি করা
$data = array(
"name" => "John Doe",
"age" => 30
);
// JSONP রেসপন্স তৈরি করা
header('Content-Type: application/javascript');
echo $callback . '(' . json_encode($data) . ');';
?>
ব্যাখ্যা:
callback) সংগ্রহ করা হয়েছে।json_encode() ফাংশন ব্যবহার করে JSON ফরম্যাটে কনভার্ট করা হয়েছে।handleResponse) কল করা হয়েছে এবং JSON ডেটা তার প্যারামিটার হিসেবে পাঠানো হয়েছে।<script> ট্যাগ এবং একটি callback function প্রয়োজন, যা সহজ এবং কার্যকর পদ্ধতি।JSONP এখনও অনেক ক্ষেত্রে ব্যবহার করা হয়, তবে নিরাপত্তা এবং ফ্লেক্সিবিলিটির জন্য আধুনিক অ্যাপ্লিকেশনগুলোতে CORS (Cross-Origin Resource Sharing) বেশি ব্যবহৃত হয়। CORS Ajax রিকোয়েস্টের জন্য আরও বেশি নিরাপত্তা এবং নিয়ন্ত্রণ প্রদান করে।
JSONP এর মাধ্যমে Ajax রিকোয়েস্ট তৈরি করা একটি কার্যকর পদ্ধতি, যা Cross-Domain Request এর সীমাবদ্ধতা অতিক্রম করে। JSONP শুধুমাত্র GET রিকোয়েস্ট ব্যবহার করে কাজ করে এবং সার্ভার থেকে সরাসরি জাভাস্ক্রিপ্ট কোড লোড করে ব্রাউজারে এক্সিকিউট করে। নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে JSONP ব্যবহার করে Ajax রিকোয়েস্ট তৈরি করা হয়েছে এবং JSON ডেটা ফেচ করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Data Request Example</title>
</head>
<body>
<h1>JSONP Data Fetch Example</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- JSONP ডেটা এখানে দেখানো হবে -->
</div>
<script>
// Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
function handleResponse(data) {
var container = document.getElementById('data-container');
container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
}
// JSONP রিকোয়েস্ট পাঠানোর ফাংশন
function fetchData() {
// <script> ট্যাগ তৈরি করা
var script = document.createElement('script');
// JSONP রিকোয়েস্ট URL সেট করা যেখানে callback=handleResponse ব্যবহার করা হয়েছে
script.src = 'https://example.com/api?callback=handleResponse';
// ডকুমেন্টে <script> ট্যাগ অ্যাড করা
document.body.appendChild(script);
}
</script>
</body>
</html>
Callback Function:
handleResponse ফাংশনটি ক্লায়েন্ট সাইডে তৈরি করা হয়েছে, যা সার্ভার থেকে প্রাপ্ত JSONP রেসপন্স হ্যান্ডল করে এবং HTML ডিভ (data-container) এ ডেটা প্রদর্শন করে।Script Tag Creation:
fetchData() ফাংশন একটি <script> ট্যাগ তৈরি করে এবং সেটি ডকুমেন্টে যোগ করে। এর ফলে ব্রাউজার থেকে সার্ভার পর্যন্ত একটি JSONP রিকোয়েস্ট পাঠানো হয়।callback=handleResponse পাঠানো হয়েছে, যা সার্ভারকে নির্দেশ করে যে JSON রেসপন্সটি handleResponse ফাংশনের মাধ্যমে প্রসেস করা হবে।Server Response:
handleResponse({
"name": "John Doe",
"age": 30
});
handleResponse ফাংশন কল হয়, যা ডেটা প্রসেস করে এবং UI এ প্রদর্শন করে।<?php
// প্যারামিটার সংগ্রহ করা
$callback = $_GET['callback'];
// JSON ডেটা তৈরি করা
$data = array(
"name" => "John Doe",
"age" => 30
);
// JSONP রেসপন্স তৈরি করা
header('Content-Type: application/javascript');
echo $callback . '(' . json_encode($data) . ');';
?>
ব্যাখ্যা:
callback প্যারামিটার সংগ্রহ করা হয়েছে, যা ক্লায়েন্ট সাইডে পাঠানো হয়েছে (উদাহরণ: handleResponse)।json_encode() ফাংশন ব্যবহার করে JSON ফরম্যাটে কনভার্ট করা হয়েছে।handleResponse) কল করা হয়েছে এবং JSON ডেটা তার প্যারামিটার হিসেবে পাঠানো হয়েছে।Cross-Domain Request সমাধান:
সহজ Implementation:
<script> ট্যাগ এবং একটি callback function দিয়ে এটি করা যায়।Immediate Execution:
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
